<template>
  <el-dialog
    class="detailDialog"
    v-model="props.unusualDialog"
    title="异常详情"
    width="35%"
    :close-on-click-modal="false"
    @close="close"
  >
    <div>点检项目：{{ props.unusualForm?.itemName }}</div>
    <div>点检指标：{{ props.unusualForm?.content }}</div>
    <el-divider />
    <div class="title">异常信息录入</div>
    <div class="row">
      <div>
        处理方式:
        {{ props.unusualForm?.dealWay == 1 ? '点检处理' : '点检报修处理' }}
      </div>
      <div>处理人: {{ props.unusualForm?.dealUserName }}</div>
    </div>
    <div class="row">
      <div>异常描述: {{ props.unusualForm?.description }}</div>
    </div>
    <div class="row">
      <div>
        异常照片：
        <div style="display: flex; flex-wrap: wrap">
          <div v-for="(item, index) in ycPicture">
            <el-image
              style="width: 84px; height: 84px; margin-right: 10px"
              :src="item"
              :zoom-rate="1.2"
              :preview-src-list="ycPicture"
              :initial-index="index"
              fit="cover"
            />
          </div>
          <div v-for="(item, index) in ycVedio">
            <video
              :src="item"
              class="avatar"
              controls="controls"
              style="width: 84px; height: 84px; margin-right: 10px"
              @play="handleFullScreen"
            ></video>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
const props = defineProps({
  unusualDialog: Boolean,
  unusualForm: Object
})

const ycPicture = ref<any>([])
const ycVedio = ref<any>([])

watch(
  () => props.unusualDialog,
  () => {
    if (props.unusualDialog == true) {
      ycPicture.value = []
      ycVedio.value = []
      if (props.unusualForm?.pictures != '') {
        let arr = props.unusualForm?.pictures.split(',')
        arr.forEach((item: any) => {
          let a = item.lastIndexOf('\?')
          let str = item.substring(a - 3, a)
          if (str == 'png' || str == 'jpg' || str == 'peg') {
            ycPicture.value.push(item)
          } else {
            ycVedio.value.push(item)
          }
        })
      }
    }
  }
)
const handleFullScreen = (e: any) => {
  launchFullscreen(e.target)
}

const launchFullscreen = (element: any) => {
  //此方法不可以在異步任務中執行，否則火狐無法全屏
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  } else if (element.oRequestFullscreen) {
    element.oRequestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen()
  } else {
    var docHtml = document.documentElement
    var docBody = document.body
    var videobox = element
    var cssText = 'width:100%;height:100%;overflow:hidden;'
    docHtml.style.cssText = cssText
    docBody.style.cssText = cssText
    videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;'
    document.IsFullScreen = true
  }
}

const emit = defineEmits(['unusualClose'])
const close = () => {
  emit('unusualClose')
}
</script>
<style scoped lang="scss">
.row {
  display: flex;
  margin: 15px 0px;
  padding-left: 10px;
  font-size: var(--el-font-size-base);

  > div {
    max-width: 400px;
    min-width: 300px;
    margin-right: 50px;
    line-height: 30px;

    .click {
      color: aqua;
      cursor: pointer;
    }

    .photo {
      text-decoration: underline;
    }
  }
}

.title {
  font-size: var(--el-font-size-base);
  font-weight: 600;
}
</style>
